//卡片分布组件
<template>
  <div>
    <top @func="getSearch"></top>
    <PageArtical ref="PageArtical" @func="getPage"></PageArtical>

  </div>
</template>


<script>
  import top from "../common/Header.vue";
  import {ArticalPageReq} from "../req/ArticalPageReq";
  import {ContentType} from "../constant/ContentType";
  import {ResultStatus} from "../constant/ResultStatus";
  import {StringUtil} from "../../utils/StringUtil";
  import PageArtical from '../common/PageCard'
  import {PageRes} from "../res/PageRes";
  import {PageType} from "../constant/PageType";
  import $ from 'jquery'
  import config from '@/config/'
  let articaPageReq = new ArticalPageReq();

  export default {
    pops:{
    },
    data() {
      return {
        size:40,//数量
        currentPage:1, //当前页数
        search:"",//返回搜索字段
      };
    },
    mounted(){
      this.queryPage()
      //jquery替换失效的图片
      /*$(document).ready(function(){
        //图片
        $('img').each(function(i,val){
          let img_src = $(this).attr('src');
          let new_img_src =  img_src.replace('104.199.199.214:9000/file-server/files/bbs/',config.replateFileserver);
          $(this).attr('src',new_img_src);
        })
        //a标签
        $('a').each(function(i,val){
          let img_src = $(this).attr('href');
          let new_img_src =  img_src.replace('104.199.199.214:9000/file-server/files/bbs/',config.replateFileserver);
          $(this).attr('href',new_img_src);
        })
      });*/
    },
    methods:{
      clickReload() { // 点击之后强制刷新
        this.reload()
      },
      queryPage(){
        articaPageReq.size = this.size;
        if(this.$route.query.page){
          this.currentPage = this.$route.query.page
        }
        else{
          this.currentPage  = 1;
        }
        articaPageReq.page = this.currentPage;
        articaPageReq.des  = this.search;
        this.$axios
          .post('/home/queryPage',
            articaPageReq, //转成json
            ContentType.APPLICATION_JSON,
          )
          .then((response)=>{

            let datas = response.data;
            if(datas.code != ResultStatus.SUCCESS){
              this.$notify(StringUtil.warning(datas.msg));
              return;
            }
            let datas2 = datas.data;
            this.size =  datas2.size;
            this.pageInfo = datas2.list;
            this.totalPage = datas2.totalPage
           //分页数据
            let pageModel = new PageRes();
            pageModel.list = datas2.list;
            pageModel.page = datas2.page;
            pageModel.size = datas2.size;
            pageModel.totalPage = datas2.totalPage;
            pageModel.totalSize = datas2.totalSize;
            pageModel.pageType = PageType.HOME;
            this.$refs.PageArtical.queryPage(pageModel)

          })
          .catch((error)=>{
            console.log(error);
            let datas = error.data;
            this.$notify(StringUtil.warning(datas.msg));
          })

      },
      pageChange(page){
        this.currentPage  = page;
        // this.$router.push(`/home?page=${page}`)
        this.$router.push({name:'home',query:{page:page}})
        this.queryPage();
      },
      /**
       * 获取top传来的搜索字段
       * @param data
       */
      getSearch(data){
        this.search = data;
        this.queryPage();

      },
      /**
       * 获取分页组件的页码
       * @param data
       */
      getPage(data){
        this.pageChange(data);
      }
    },
    components:{
      top,
      PageArtical,
    }

  };

</script>

<style>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;

  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }
  .card{
    transform:scale(0.8)
  }
</style>
